<template>
  <div class="page">
    <Form
      ref="formRef"
      class="customer-detail-form"
      :form="form"
      :config="config"
      :rules="rules"
      :name="name"
      label-width="80"
      @change="changeHandle"
    >
      <template #inputNumber="{ data }">
        <span>{{ data.text }}</span>
      </template>
    </Form>
  </div>
</template>

<script setup>
// components
import Form from '@/components/Form/Form.vue'
// hooks
import useForm from '@/hooks/useForm'
// others
import { ref } from 'vue'
import { formData, formConfig } from './config'

/** Form */
const formRef = ref()
const { form, config, submitForm } = useForm({ formRef, formData, formConfig })
const searchForm = async () => {
  submitForm(() => {
    console.log(111)
  })
}
</script>

<style lang="less" scoped>
.customer-detail-form {
  width: 60%;
}
</style>
